<template>
	<cl-drawer
		ref="drawer"
		:props="{
			title: '投诉/建议',
			size: '60%',
			appendToBody: true
		}"
		showConfirm
		confirmText="新增投诉"
		@confirm="openForm"
	>
		<cl-crud ref="crud" @load="onLoad" :on-refresh="onRefresh">
			<cl-data-table
				v-bind="table"
				:resetPage="false"
				:page.sync="search.page"
				:limit.sync="search.size"
				@pagination="refresh()"
			>
				<template #column-img="{ scope: { row } }">
					<span v-if="!row.img.length">-</span>
					<template v-else>
						<cl-avatar
							:preview-src-list="row.img"
							v-for="(item, index) in row.img"
							:key="index"
							shape="square"
							:src="item"
							class="mr-1"
						/>
					</template>
				</template>
				<template #column-opt="{ scope: { row } }">
					<div class="flex flex-align-start">
						<el-button type="primary" @click="openDetail(row)"> 详情 </el-button>
					</div>
				</template>
			</cl-data-table>
		</cl-crud>
		<sys-advice-form ref="form" @confirm="handleRefresh()" />
		<advice-info ref="info" />
	</cl-drawer>
</template>
<script>
import SysAdviceForm from "./sys-advice-form";

export default {
	components: {
		SysAdviceForm
	},
	data() {
		return {
			search: {
				biz_id: "",
				search_content: "",
				page: 1,
				size: 20
			},
			table: {
				ref: "table",

				full: true,
				loading: false,
				total: 0,
				data: [],
				columns: [
					{
						label: "内容",
						prop: "content",
						minWidth: 300,
						align: "left",
						showOverflowTooltip: true
					},
					{ label: "凭证", prop: "img", width: 340 },
					{
						label: "类型",
						prop: "type",
						formatter: row => this.$constFilter(row.type, "ADVICE_TYPE"),
						width: 100
					},
					{ label: "提交时间", prop: "created_at", width: 120 },

					{ label: "操作", prop: "opt", width: 80, fixed: "right" }
				]
			}
		};
	},
	methods: {
		open() {
			this.$refs.drawer.create(() => {
				this.search.page = 1;
				this.search.size = 20;
				this.refresh();
			});
		},
		onLoad({ ctx }) {
			ctx.service(this.$service.user)
				.set("dict", {
					// 请求
					api: { page: "myComplaint" }
				})
				.done();
		},
		async onRefresh(params, { next, render }) {
			this.table.loading = true;
			let query = {
				...params,
				...this.search
			};
			const res = await next(query).finally(() => {
				this.table.loading = false;
			});
			this.table.data = res.list;
			this.table.total = res.pagination.total;

			render(res.list, res.pagination);
		},
		// crud刷新
		refresh() {
			this.$refs.crud.refresh({ page: 1, ...this.search });
		},
		handleRefresh() {
			this.search.page = 1;
			this.refresh();
		},
		// 详情
		openDetail(row) {
			this.$refs.info.open(row);
		},
		// 新增投诉
		openForm() {
			this.$refs.form.open();
		}
	}
};
</script>
